<template>
  <div class="check-repeat-dialog">
    <el-dialog v-model="isDialogCheckRepeat" width="720" :align-center="true" destroy-on-close @closed="resetCheck">
      <template #header>
        <title-view title="查重"></title-view>
      </template>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入电话" v-model="mobileCode" :suffix-icon="Search" @keyup.enter="handelSearchRepeat" />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" :icon="Search" @click="handelSearchRepeat">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="isCheckLoading"
        :data="customCheckList"
        border
        :header-cell-style="{ background: '#F2F6FC', color: '#909399', 'font-weight': 400, 'font-size': '14px' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column property="customerName" label="客户姓名" width="150" show-overflow-tooltip />
        <el-table-column property="address" label="项目地址" width="200" show-overflow-tooltip />
        <el-table-column property="businessUserName" label="业务人员" />
        <el-table-column property="createTime" label="创建日期" width="200" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { Search } from "@element-plus/icons-vue";
import { tableRowClassName } from "@/views/client/utils";
import { customCheckCrm } from "@/apis/clientManager";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const isDialogCheckRepeat = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const isCheckLoading = ref(false);
const mobileCode = ref("");
const customCheckList = ref([]);
const getCustomCheckCrm = async () => {
  try {
    if (!mobileCode.value) {
      return proxy.$modal.msgError("请输入要查询的手机号");
    }
    isCheckLoading.value = true;
    const { data } = await customCheckCrm(mobileCode.value);
    isCheckLoading.value = false;
    customCheckList.value = data;
  } catch (err) {
    isCheckLoading.value = false;
  }
};
const handelSearchRepeat = proxy.$lodash.debounce(getCustomCheckCrm, 500);
const resetCheck = () => {
  mobileCode.value = "";
  customCheckList.value = [];
};
</script>

<style scoped lang="scss">
@use "CheckRepeat";
</style>
